<template>
	<view class="header" v-model="data">
		<view class="uesr">
			<view class="back">
				<view class="top-xh">
					<view class="h2">个人中心</view>
				</view>
				<view class="fot-xh">
					<view class="pic">
						<image :src="avatarUrl" style="width: 130rpx; border-radius: 50%" mode="widthFix"></image>
					</view>
					<view class="txt">
						<view class="name">
							<view class="h3">
								{{ nickName }}
							</view>
							<view class="phone">
								{{ phoneNumber }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="about">
			<view class="m-a1">
				<navigator url="" hover-class="none">
					<view class="pic">
						<image src="../../static/ka.png" style="width: 76rpx" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text class="s1">{{ card }}加油卡</text>
						<view class="money">
							<view>余额:</view>
							<view style="font-size: 50rpx; color: crimson; font-style: inherit" :value="index">
								{{ money[index] }}
							</view>
							<div>元</div>
							<button class="button-yuanjiao" hover-class="bg-click" @click="showMoney()">立即充值</button>
						</view>
					</view>
				</navigator>
			</view>
			<view class="m-a1">
				<navigator url="" hover-class="none">
					<view class="pic">
						<image src="../../static/juan.png" style="width: 76rpx" mode="widthFix"></image>
					</view>
					<view @click="showCoupon()" class="txt">
						<text class="s1">我拥有的优惠卷</text>
						<text>----->立即进入</text>
					</view>
				</navigator>
			</view>
		</view>
		<view class="ul-list1-xh">
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none">
					<view class="pic">
						<uni-icons type="bars" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<picker @change="pick($event)" mode="selector" :value="index" :range="list" class="listPicker">
							<view>{{ list[index] }}</view>
						</picker>
					</view>
				</navigator>
			</view>
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none" @click="showShop()">
					<view class="pic">
						<uni-icons type="checkbox-filled" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<text>收藏店铺</text>
					</view>
				</navigator>
			</view>
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none" v-on:click="showToast2()">
					<view class="pic">
						<uni-icons type="info-filled" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<text>意见反馈</text>
					</view>
				</navigator>
			</view>
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none" v-on:click="showToast1()">
					<view class="pic">
						<uni-icons type="contact" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<text>关于我们</text>
					</view>
				</navigator>
			</view>
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none" v-on:click="showToast4()">
					<view class="pic">
						<uni-icons type="weixin" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<text>联系客服</text>
					</view>
				</navigator>
			</view>
			<view class="li" style="background-color: white">
				<navigator url="" hover-class="none" v-on:click="unlogin()">
					<view class="pic">
						<uni-icons type="left" size="60rpx"></uni-icons>
					</view>
					<view class="txt">
						<text>退出登录</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../util/http';
export default {
	data: function () {
		return {
			money: [],
			nickName: '',
			phoneNumber: '',
			list: [],
			index: 0,
			card: '',
			state: '',
			avatarUrl: '',
			userid: ''
		};
	},
	onLoad() {
		let params = {};
		params.phoneNumber = uni.getStorageSync('phoneNumber');
		params.avatarUrl = uni.getStorageSync('avatarUrl');
		params.nickname = uni.getStorageSync('nickname');
		this.nickName = params.nickname;
		this.avatarUrl = params.avatarUrl;
		this.phoneNumber = params.phoneNumber;

		this.userid = uni.getStorageSync('uid');
		http({
			url: '/userOilStoreName/userId',
			data: {
				userid: this.userid
			},
			success: (res) => {
				let jsonString = res.data.data;

				let storeNameArr = jsonString.map((obj) => obj.storeName);
				let storeMoney = jsonString.map((obj) => obj.amount);
				this.money = storeMoney;
				this.list = storeNameArr;
			}
		});
	},
	onShow() {
		this.phoneNumShow();
	},
	methods: {
		pick(e) {
			this.card = this.list[e.target.value];
			this.index = e.target.value;
		},
		//隐藏手机号
		phoneNumShow() {
			let that = this;
			let number = this.phoneNumber; //获取到手机号码字段
			let mphone = number.substring(0, 3) + '****' + number.substring(7);
			that.phoneNumber = mphone;
		},

		tabCard() {
			uni.showActionSheet({
				itemList: ['手机号：132465211', '地址：四川省成都市高新区天府三街198号', '邮编：623700'],
				success(res) {
					console.log(res.tapIndex + 1);
				},
				fail(res) {
					console.log(res.errMsg);
				}
			});
		},
		unlogin() {
			uni.request({
				url: 'http://192.168.42.13:8888/login/logout'
			});
			//退出登录时，取消当前本地缓存
			uni.removeStorage({
				key: 'uid'
			});

			uni.redirectTo({
				url: '../../pages/login/login'
			});
			// uni.navigateTo({
			// 	url: '/pages/login/login'
			// })
		},
		showToast1() {
			uni.showActionSheet({
				itemList: ['手机号：132465211', '地址：四川省成都市高新区天府三街198号', '邮编：623700']
			});
		},
		showToast2() {
			uni.navigateTo({
				url: '../mine/feedback'
			});
		},

		showToast4() {
			uni.showActionSheet({
				itemList: ['客服微信：wangyujie520'],
				success(res) {
					console.log(res.tapIndex);
				},
				fail(res) {
					console.log(res.errMsg);
				}
			});
		},
		//进入我的优惠卷
		showCoupon() {
			uni.navigateTo({
				url: '../coupon/list'
			});
		},
		//加油卡充值
		showMoney() {
			uni.navigateTo({
				url: '/pages/oil/myoil'
			});
		},
		//收藏页面
		showShop() {
			uni.navigateTo({
				url: '../shop/collect'
			});
		}
	}
};
</script>

<style>
/* 下拉框 */
.picker {
	width: 100%;
	box-sizing: border-box;
	padding: 50rpx;
	text-align: center;
	margin-top: 50rpx;
}

.about :nth-child(2) {
	margin-top: 20rpx;
}

.money {
	display: flex;
}

.money :nth-child(1) {
	margin-top: 40rpx;
}

.money :nth-child(2) {
	margin-top: 30rpx;
}

.money :nth-child(3) {
	margin-top: 40rpx;
}

.money :nth-child(4) {
	margin-top: 60rpx;
}

/* 按钮样式 */
.button-yuanjiao {
	width: 170rpx;
	height: 50rpx;
	display: flex;
	margin-top: 30rpx;
	line-height: 50rpx;
	justify-content: center;
	border-radius: 25px;
	background-color: #ff5500;
	font-size: 28rpx;
}

.bg-click {
	background-color: #a7a9ff;
}

.top-xh {
	padding-top: 40rpx;
	overflow: hidden;
	margin-bottom: 60rpx;
}

.top-xh .h2 {
	float: left;
	font-size: 32rpx;
	font-weight: bold;
}

.top-xh .pic {
	float: right;
}

.uesr {
	overflow: hidden;
	padding: 0 30rpx;

	height: 345rpx;
}

.fot-xh .pic {
	float: left;
	margin-right: 30rpx;
}

.fot-xh .txt {
	padding: 20rpx 0;
	overflow: hidden;
}

.fot-xh .txt .name {
	position: relative;
	display: block;
}

.fot-xh .txt .name .h3 {
	font-size: 40rpx;
	margin-bottom: 13rpx;
	font-weight: bold;
}

.fot-xh .txt .name .phone {
	height: 40rpx;
	line-height: 40rpx;
	font-size: 30rpx;
	width: 330rpx;

	background-size: 100rpx;
	color: rgb(68, 68, 68);
}

/* 
	.fot-xh .name::after {
		content: '';
		position: absolute;
		border-top: 4rpx solid rgb(179, 179, 179);
		border-left: 4rpx solid rgb(179, 179, 179);
		width: 14rpx;
		height: 14rpx;
		right: 5rpx;
		top: 30%;
		transform: rotate(135deg);
	} */

.m-a1 {
	overflow: hidden;
	padding: 20rpx;
	background-color: #fff;
	margin: 0 60rpx;
	box-shadow: 0rpx 5rpx 16rpx 0rpx rgb(226, 236, 255);
	margin-top: -40rpx;
	border-radius: 40rpx;
}

.m-a1 .txt {
	overflow: hidden;
}

.m-a1 .pic {
	float: left;
	margin-right: 30rpx;
}

.m-a1 text {
	display: block;
	font-size: 24rpx;
	color: rgb(179, 179, 179);
}

.m-a1 .txt .s1 {
	font-size: 24rpx;
	margin-bottom: 10rpx;
	color: rgb(0, 0, 0);
	font-weight: bold;
}

.ul-list1-xh {
	overflow: hidden;
	padding: 0 30rpx;
	padding-top: 30rpx;
	padding-bottom: 300rpx;
}

.ul-list1-xh .li {
	padding: 20rpx 0;
	overflow: hidden;
	position: relative;
}

.ul-list1-xh .li .pic {
	float: left;
	margin-right: 10rpx;
	margin-top: -10rpx;
}

.ul-list1-xh .li .txt {
	overflow: hidden;
	font-size: 24rpx;
	padding-bottom: 20rpx;
	border-bottom: 1px solid rgb(242, 242, 242);
}

.ul-list1-xh .li::after {
	content: '';
	position: absolute;
	border-top: 3rpx solid rgb(179, 179, 179);
	border-left: 3rpx solid rgb(179, 179, 179);
	width: 15rpx;
	height: 15rpx;
	right: 25rpx;
	top: 30%;
	transform: rotate(135deg);
}

.header {
	background-color: floralwhite;
}
</style>
